<template>
	<view class="container">
		<view class="infoBg" :style="{'background': 'url('+ listInfo.coverImgUrl +')'}"></view>
		<musicHead title='歌单' :icon="true" style="color: white;"/>
		<view class="content">
			<scroll-view scroll-y="true" >
				<view class="box">
					<view class="image-box">
						<image :src="listInfo.coverImgUrl" mode=""></image>
					</view>
					<view class="image-info">
						<text>{{listInfo.name}}</text>
					</view>
					<view class="msg-box" style="color: white;">
						<view class="msg-box-text1">
							标签：无
						</view>
						<view class="msg-box-text2">
							<text>{{listInfo.description}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import'@/common/iconfont.css'
	import musicHead from "../../components/MusicHead/MusicHead.vue"
	import {listInfo} from "../../common/api.js"
	
	export default {
		data() {
			return {
				listInfo:{},
				msgId:0
			}
		},
		methods: {
			
		},
		components:{musicHead},
		onLoad(id) {
			// // 进行对url截取获取跳转页面的id
			// let strUrl = window.location.href;
			// let arrUrl=strUrl.split("/");
			// let strPage=arrUrl[arrUrl.length-1];
			// let str = strPage.replace(".html","").replace(".htm","")
			// let numArr = parseInt(str.match(/\d+/g))
			// /*
			// 网络请求块
			// */
			this.msgId = id.id
			listInfo(this.msgId).then((res) => {
				this.listInfo = res
			})
		},
	}
</script>

<style scoped>
.infoBg{
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-size: cover;
		background-position: center 0;
		filter: blur(20px);
		transform: scale(1.2);
}
.box{
	height: 100%;
	margin: 0 auto;
	margin: 30rpx;
}
.image-box{
	width: 400rpx;
	height: 400rpx;
	overflow: hidden;
	border-radius: 15rpx;
	margin: 0 auto;
}
.image-box image{
	width: 100%;
	height: 100%;
}
.image-info{
	width: 100%;
	height: 100rpx;
	margin-top: 50rpx;
	text-align: center;
	font-size: 40rpx;
	letter-spacing: 4rpx;
	color: white;
}
.msg-box{
	font-size: 30rpx;
}
.msg-box-text2{
	margin-top: 30rpx;
	height: 200rpx;
}
.msg-box-text2 text{
	line-height: 50rpx;
}
</style>
